<template>
	<el-container class="login-container">
		<el-main>
			<el-form ref="formData" :model="formData" :rules="rules" :hide-required-asterisk="true">
				<el-form-item style="margin: 0 0 30px 0;">
					<el-link icon="el-icon-back" :underline="false" href="#/login" style="float: left;"/>
					<span style="margin-left: 40%; font-size: 20px;">欢 迎</span>
				</el-form-item>
				<el-form-item prop="name">
					<el-input v-model.trim="formData.name" placeholder="姓名"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model.trim="formData.password" type="password" placeholder="密码"></el-input>
				</el-form-item>
				<el-form-item prop="api_key">
					<el-input v-model.trim="formData.api_key" placeholder="API-KEY"></el-input>
				</el-form-item>
				<el-form-item prop="api_secret">
					<el-input v-model.trim="formData.api_secret" placeholder="API-SECRET"></el-input>
				</el-form-item>
				<el-form-item prop="hook_url">
					<el-input v-model.trim="formData.hook_url" placeholder="HOOK-URL"></el-input>
				</el-form-item>
				<el-form-item prop="channel">
					<el-input v-model.trim="formData.channel" placeholder="CHANNEL"></el-input>
				</el-form-item>
				<el-form-item style="text-align: center; margin:30px 0 20px 0;">
					<el-button type="primary" style="width: 100%;" @click="submitForm('formData')">注 册</el-button>
				</el-form-item>
			</el-form>
		</el-main>
	</el-container>
</template>

<script>
	export default {
		name: 'register',
		props: [],
		data() {
			return {
				formData: {
					name: "",
					password: "",
					api_key: "",
					api_secret: "",
					hook_url: "",
					channel: ""
				},
				rules: {
					name: [
						{required: true, message: '请输入邮箱地址', trigger: 'blur'},
						{type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur'}
					],
					password: [
						{required: true, message: '请输入密码', trigger: 'blur'}
					],
					api_key: [
						{required: true, message: '请输入火币API-KEY', trigger: 'blur'}
					],
					api_secret: [
						{required: true, message: '请输入火币API-SECRET', trigger: 'blur'}
					],
					hook_url: [
						{required: true, message: '请输入SLACK hook-url', trigger: 'blur'}
					],
					channel: [
						{required: true, message: '请输入SLACK 频道名称', trigger: 'blur'}
					]
				}
			};
		}, methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.api.user.register(this.formData).then(result => {
							result = result.data;
							this.$message(result.data);
							if (result.code === 200) {
								this.$router.push("/login");
							}
						});
						return true;
					} else {
						this.$refs[formName].resetFields();
						return false;
					}
				});
			}
		}
	}
</script>

<style scoped>
	.el-form {
		width: 400px;
		margin: 5% auto 0;
		padding: 20px;
		border: 1px solid #ebebeb;
	}
</style>